import React, { Fragment, PureComponent } from 'react'
import { Text, StyleSheet, Animated, View } from 'react-native'
import PropTypes from 'prop-types'
import { ScaleS, ScaleT } from 'src/utils/ScreenUtil'
import CustomButton from '../../../../components/button/CustomButton'
import CustomImage from '../../../../components/image/CustomImage'
import { ONE_PIXEL } from '../../../../utils/ScreenUtil'
import FilterView from './FilterView'
import NavigationUtil from 'src/utils/NavigationUtil'

const yellowOkImg = require('src/imgC/home/yellow_ok.png')
export default class FilterContent2 extends PureComponent {
  static propTypes = {
    filterOpacity: PropTypes.object,
    filterContentMaxH: PropTypes.object,
    orderLabel: PropTypes.array,
    borderTagClick: PropTypes.func,
    getDataArr: PropTypes.func.isRequired,
    filterArr: PropTypes.array,
    filterBgClick: PropTypes.func,
    topViewHeight: PropTypes.number,
    isPageB: PropTypes.bool,
    workType: PropTypes.number,
    closeFilter: PropTypes.func,
    filterViewMaxH: PropTypes.number
  }

  render () {
    const { filterOpacity, filterContentMaxH, filterBgClick, topViewHeight } = this.props
    return (
      <FilterView dataArr={dataArr} activeLabel={activeLabel} borderTagClick={borderTagClick}/>
    )
  }

  /**
   * 渲染筛选的内容
   * @returns {XML}
   * @private
   */
  _showContentView = () => {
    const { filterArr, borderTagClick, getDataArr, isPageB } = this.props
    const activeFilterIndex = filterArr.findIndex((item) => {
      return item.isActive
    })
    let dataArr = []
    const activeLabel = filterArr[activeFilterIndex].fullLabel
    if (activeFilterIndex === 0) {
      return this._renderOrder(activeLabel)
    } else if (activeFilterIndex === 1) {
      if (isPageB) { // B端需要特殊处理
        dataArr = getDataArr(activeFilterIndex)
        return this._renderPositionB(dataArr, activeLabel)
      }
    }
    dataArr = getDataArr(activeFilterIndex)
    return <FilterView dataArr={dataArr} activeLabel={activeLabel} borderTagClick={borderTagClick}/>
  }

  /**
   * 渲染B端职位
   * @private
   */
  _renderPositionB = (dataArr, activeLabel) => {
    let { workType } = this.props
    const firstTitle = dataArr[0].title
    const type = Number(firstTitle)
    if (type === 0) { // 未登录
      return this._renderEmptyView({
        text: '去登录',
        navigateName: 'OneLogin'
      })
    } else if (type === 1) { // 没有数据
      if (workType === 1) {
        workType = 2
      } else if (workType === 2) {
        workType = 1
      }
      return this._renderEmptyView({
        text: '去发布职位',
        navigateName: 'JobPartTime',
        navigateParam: { type: workType }
      })
    }
    return this._renderPositionView(dataArr, activeLabel)
  }

  _renderPositionView = (dataArr, activeLabel) => {
    return (
      <View style={styles.itemView}>
        {
          dataArr.map((item, index) => {
            return (
              <Fragment key={index}>
                <Text style={styles.itemTitle}>{item.title}</Text>
                <View style={styles.itemContentView}>
                  {item.content.map((contentItem, contentIndex) => {
                    return (
                      <CustomButton
                        key={contentIndex} style={styles.orderItemView} params={contentItem}
                        onPress={this._orderClick}>
                        <Text
                          style={[styles.orderItemText, activeLabel === contentItem.label && styles.orderItemTextActive]}>{contentItem.label}</Text>
                        {
                          activeLabel === contentItem.label &&
                          <CustomImage style={styles.orderItemImg} source={yellowOkImg}/>
                        }
                      </CustomButton>
                    )
                  })}
                </View>
              </Fragment>
            )
          })
        }
      </View>
    )
  }

  /**
   * 渲染空的页面
   * @private
   */
  _renderEmptyView = (params) => {
    const { filterViewMaxH } = this.props
    return (
      <View style={[styles.emptyView, { height: filterViewMaxH }]}>
        <CustomImage style={styles.emptyImg} source={require('src/imgC/home/job_manager_null.png')}/>
        <CustomButton style={styles.emptyTextView} onPress={this._emptyClick} params={params}>
          <Text style={styles.emptyText}>{params.text}</Text>
        </CustomButton>
      </View>
    )
  }

  /***
   * 空页面点击事件
   * @private
   */
  _emptyClick = (params) => {
    const { closeFilter } = this.props
    closeFilter && closeFilter(() => {
      NavigationUtil.navigate(params.navigateName, params.navigateParam)
    })
  }

  /**
   * 渲染排序
   * @returns {XML}
   * @private
   */
  _renderOrder = (activeLabel) => {
    const { orderLabel } = this.props
    return (
      orderLabel.map((item, index) => {
        return (
          <CustomButton key={index} style={styles.orderItemView} params={item} onPress={this._orderClick}>
            <Text
              style={[styles.orderItemText, activeLabel === item.label && styles.orderItemTextActive]}>{item.label}</Text>
            {
              activeLabel === item.label &&
              <CustomImage style={styles.orderItemImg} source={yellowOkImg}/>
            }
          </CustomButton>
        )
      })
    )
  }

  /**
   * 排序的筛选
   * @param order
   * @private
   */
  _orderClick = (item) => {
    const { filterArr, borderTagClick } = this.props
    const activeLabel = filterArr[0].label
    if (activeLabel !== item.label) {
      borderTagClick && borderTagClick(true, item)
    }
  }
}

const styles = StyleSheet.create({
  container: {
    paddingBottom: ScaleS(23)
  },
  filterBgOutView: {
    position: 'absolute',

    width: '100%',
    height: '100%',
    backgroundColor: 'transparent'
  },
  filterBgView: {
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0,0,0,0.7)'
  },
  filterContentView: {
    position: 'absolute',
    top: 0,
    width: '100%',
    zIndex: 3,
    borderBottomRightRadius: ScaleS(10),
    borderBottomLeftRadius: ScaleS(10),
    overflow: 'hidden',
    borderTopColor: '#F7F7F7',
    borderStyle: 'solid',
    borderTopWidth: ONE_PIXEL,
    paddingHorizontal: ScaleS(20),
    backgroundColor: 'white'
  },
  contentContainer: {
    paddingBottom: ScaleS(23)
  },
  orderView: {},
  orderItemView: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingVertical: ScaleS(28),
    borderBottomColor: 'rgba(120,120,120,0.2)',
    borderStyle: 'solid',
    borderBottomWidth: ONE_PIXEL
  },
  orderItemText: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '400'
  },
  orderItemTextActive: {
    color: '#FFC61C'
  },
  orderItemImg: {
    width: ScaleS(15),
    height: ScaleS(10)
  },
  educationView: {
    paddingVertical: ScaleS(26)
  },
  educationTitle: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '500'
  },
  educationContentView: {
    flexDirection: 'row',
    flexWrap: 'wrap'
  },
  tagView: {
    marginLeft: ScaleS(16),
    marginTop: ScaleS(24)
  },
  tagText: {
    color: '#666666',
    fontSize: ScaleT(14),
    fontWeight: '400'
  },
  emptyView: {
    alignItems: 'center',
    justifyContent: 'center'
  },
  emptyImg: {
    width: ScaleS(120),
    height: ScaleS(120)
  },
  emptyTextView: {
    width: ScaleS(99),
    height: ScaleS(36),
    marginTop: ScaleS(47),
    borderRadius: ScaleS(5),
    backgroundColor: '#282828',
    justifyContent: 'center',
    alignItems: 'center'
  },
  emptyText: {
    color: '#FFFFFF',
    fontSize: ScaleT(13),
    fontWeight: '400'
  },
  positionView: {},
  itemView: {},
  itemTitle: {
    color: '#444444',
    fontSize: ScaleT(16),
    fontWeight: '500',
    marginTop: ScaleS(26)
  },
  itemContentView: {}
})
